<template>
  <div 
    :style="{paddingTop: bottom?'32px':'30px'}" 
    class="wrap">
    <div class="comfire">
      <div>
        <p class="desc bold flex flex-align-center">
          <span class="label">{{ $t('loanMoney.wantLoan') }}</span>
          <span class="value font-24 blue">{{ $store.getters.moneySplit(trueAmount) }} VND</span>
        </p>
        <test-com
          :min="amountRange[0]" 
          :max="amountRange[1]" 
          v-model="amount" 
          :step ="amountPer" 
          name ="amount"
          show-steps 
          @change="updataTrueAmount"/>
        <div 
          class="flex flex-justify-between remark font-16" 
          @touchmove="updataTrueAmount()">
          <span class="begin">{{ $store.getters.moneyTransferToM(amountRange[0] ) }}</span>
          <span class="end">{{ $store.getters.moneyTransferToM(amountRange[1]) }}</span>
        </div>
      </div>
      <div >
        <p class="desc bold flex flex-align-center">
          <span class="label">{{ $t('loanMoney.wantLoan') }}</span>
          <span class="value font-24 blue">{{ period }} ngày</span> 
        </p>
        <test-com 
          :min="periodRange[0]" 
          :max="periodRange[1]" 
          v-model="period" 
          :step="periodPer" 
          name ="period" 
          show-steps
          unit = "ngày"
          @change="updataPeriod"/>
        <div class="flex flex-justify-between remark font-16">
          <span class="begin">{{ periodRange[0] }} ngày</span>
          <span class="end">{{ periodRange[1] }} ngày</span>
        </div>
        <div class="loan_desc">
          {{ $t('home.progressType'+$route.query.type) }}
        </div>
      </div>
    </div>
    <div 
      :class="bottom?'light':'blue'" 
      class="bar flex white">
      <div class="text-wrap border-right">
        <p>{{ $t('loanMoney.loanAmount') }}</p>
        <p class="bold">{{ $store.getters.moneySplit(trueAmount) }} VND</p>
      </div>
      <div class="text-wrap border-right">
        <p>{{ $t('loanMoney.payDate') }}</p>
        <p class="bold">{{ payDate }}</p>
      </div> 
      <div class="text-wrap">
        <p>{{ $t('loanMoney.payAmount') }}</p>
        <p class="bold">{{ $store.getters.moneySplit(payAmount) }} VND</p>
      </div>
    </div>
    <div 
      v-if="bottom" 
      class="bottom">
      <div 
        class="full-width flex flex-justify-center padding" 
        style="margin-top: 30px;">
        <el-button 
          type="primary" 
          round 
          @click="submit"> &nbsp; {{ $t('others.submit') }} &nbsp; </el-button>
      </div>
      <p class="grey font-16 text-center padding-top">
        {{ $t('others.submitDesc') }}
      </p>
    </div>
  </div>
</template>
<script>
import testCom from './test.vue'
import base from '../common/fn.js'
export default {
  components: { testCom },
  props: {
    bottom: {
      type: [Boolean],
      default: true
    },
    title: {
      type: [String],
      default: 'Giải pháp tài chính trong vòng 24 giờ tức'
    },
    parentAmount: {
      type: [Number],
      default: 0
    },
    parentPeriod: {
      type: [Number],
      default: 0
    }
  },
  data() {
    return {
      amount: 1,
      period: 1,
      amountRange: [],
      amountPer: 1000,
      periodRange: [7, 14],
      periodPer: 7,
      payAmount: ''
    }
  },
  computed: {
    trueAmount: {
      // 为了兼容之前使用element-slider组件的写法，此处trueAmount即为amount
      get() {
        return this.amount
      },
      set() {
        return this.amount
      }
    },
    payDate() {
      const self = this
      if (process.browser) {
        sessionStorage.setItem('payDate', self.getDate(self.period))
      }

      self.$store.commit('setPayDate', self.getDate(self.period))
      return self.getDate(self.period)
    }
  },
  watch: {
    trueAmount(val) {
      const self = this
      this.payAmount =
        self.dayInterest * self.period * self.trueAmount + self.trueAmount
      this.updataPayAmount()
    },
    period(val) {
      const self = this
      this.payAmount =
        self.dayInterest * self.period * self.trueAmount + self.trueAmount
      this.updataPayAmount()
    }
  },
  mounted() {
    this.fetchLoanInfo()
  },
  methods: {
    getDate(days) {
      var now = new Date()
      if (days >= 1) {
        now = new Date(now.getTime() + 86400000 * days)
      }
      var yyyy = now.getFullYear(),
        mm = (now.getMonth() + 1).toString(),
        dd = now.getDate().toString()
      if (mm.length == 1) {
        mm = '0' + mm
      }
      if (dd.length == 1) {
        dd = '0' + dd
      }
      return yyyy + '-' + mm + '-' + dd
    },
    fetchLoanInfo() {
      const self = this
      let option = {
        header: {
          ...base,
          action: 'P0001'
        }
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data, studentInfo, motobikeInfo, rentInfo, loveInfo, visaInfo
          res.data.forEach((item, i) => {
            if (item.appPackage.indexOf('student') > 0) {
              studentInfo = item
            } else if (item.appPackage.indexOf('motorcycle') > 0) {
              motobikeInfo = item
            } else if (item.appPackage.indexOf('rent') > 0) {
              rentInfo = item
            } else if (item.appPackage.indexOf('love') > 0) {
              loveInfo = item
            } else if (item.appPackage.indexOf('visa') > 0) {
              visaInfo = item
            }
          })
          switch (parseInt(this.$route.query.type)) {
            case 2:
              data = studentInfo
              break
            case 6:
              data = motobikeInfo
              break
            case 3:
              data = rentInfo
              break
            case 5:
              data = loveInfo
              break
            case 4:
              data = visaInfo
              break
            default:
              data = res.data[0]
          }
          self.amountPer = parseInt(data.productAmountPer)
          self.amountRange[0] = data.productAmountMin
          self.amountRange[1] = data.productAmountMax
          self.periodPer = parseInt(data.productPeriodPer)
          self.periodRange[0] = data.productPeriodMin
          self.periodRange[1] = data.productPeriodMax
          self.dayInterest = data.dayInterest
          self.amount = this.parentAmount || self.amountRange[0]
          self.period = this.parentPeriod || self.periodRange[0]
          self.payAmount =
            self.dayInterest * self.period * self.trueAmount + self.trueAmount
          self.productId = data.id
          sessionStorage.setItem('productId', self.productId)
          self.$store.commit('setProductId', self.productId)
          this.updataPeriod()
          this.updataTrueAmount(self.amount)
          this.updataPayAmount(self.amount)
        }
      })
    },
    updataTrueAmount(val) {
      if (val) {
        this.amount = val
      }
      const self = this
      sessionStorage.setItem('trueAmount', self.trueAmount)
      self.$store.commit('setTrueAmount', self.trueAmount)
      sessionStorage.setItem('amount', self.amount)
      self.$store.commit('setAmount', self.amount)
    },
    updataPeriod(val) {
      if (val) {
        this.period = val
      }
      const self = this
      sessionStorage.setItem('period', self.period)
      self.$store.commit('setPeriod', self.period)
    },
    updataPayAmount() {
      const self = this
      sessionStorage.setItem('payAmount', self.payAmount)
      self.$store.commit('setPayAmount', self.payAmount)
    },
    submit() {
      const self = this
      self.$emit('submit')
    }
  }
}
</script>
<style>
.el-slider__button {
  width: 48px;
  height: 36px;
  border: none;
  background: url(../static/img/huakuai.png);
  background-size: cover;
  border-radius: 5px;
}
.el-slider__bar {
  height: 6px;
  background-color: #3462ff;
}
</style>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  .comfire {
    width: 90%;
    margin: 0 auto;

    .line-height-38 {
      line-height: 38px;
    }
    .desc {
      font-family: Arial-BoldMT;
    }
  }

  .bar.light {
    background: url('../static/img/bg1.png');
    background-size: cover;
  }
}
@media screen and (min-width: 1200px) {
  .wrap {
    background-color: #fff;
    .title {
      height: 66px;
      font-size: 35px;
    }
    .line-height-53 {
      line-height: 53px;
    }
    .comfire {
      padding: 20px;
      .loan_desc {
        line-height: 24px;
        font-size: 12px;
        color: #727272;
      }
      .desc {
        font-family: Arial-BoldMT;
        font-size: 18px;
        line-height: 60px;
        .label {
          font-size: 18px;
          color: rgba(75, 75, 75, 1);
        }
        .value {
          color: #3462ff;
          flex: auto;
          text-align: center;
          font-size: 24px;
        }
      }
      .remark {
        margin-bottom: 20px;
      }
    }
    .bar {
      width: 100%;
      height: 98px;
      padding: 16px;
      box-sizing: border-box;
      background: url('../static/img/dashed-bg.png');
      background-size: cover;
      div {
        flex: 1;
        text-align: center;
        p:nth-child(1) {
          color: #fff;
          font-size: 16px;
          line-height: 35px;
        }
        p:nth-child(2) {
          color: #fff;
          font-size: 18px;
          line-height: 35px;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .wrap {
    background-color: #fff;
    .title {
      height: 66px;
      font-size: 35px;
    }
    .line-height-53 {
      line-height: 53px;
    }
    .comfire {
      .loan_desc {
        line-height: 24px;
        font-size: 12px;
        color: #727272;
      }
      padding: 0 20px;
      .desc {
        font-family: Arial-BoldMT;
        font-size: 18px;
        line-height: 60px;
        .label {
          font-size: 18px;
          color: rgba(75, 75, 75, 1);
        }
        .value {
          color: #3462ff;
          flex: auto;
          text-align: center;
          font-size: 24px;
        }
      }
      .remark {
        margin-bottom: 15px;
      }
    }
    .bar {
      width: 100%;
      height: 98px;
      padding: 16px;
      box-sizing: border-box;
      background: url('../static/img/dashed-bg.png');
      background-size: cover;
      div {
        flex: 1;
        text-align: center;
        p:nth-child(1) {
          color: #fff;
          font-size: 16px;
          line-height: 35px;
        }
        p:nth-child(2) {
          color: #fff;
          font-size: 18px;
          line-height: 35px;
        }
      }
    }
  }
}
@media only screen and (max-width: 767px) {
  .wrap {
    background-color: transparent;
    .title {
      color: #fff;
      height: 70px;
      font-size: 26px;
      font-weight: bold;
    }
    .comfire {
      .loan_desc {
        line-height: 24px;
        font-size: 12px;
        color: #fff;
      }
      .desc {
        font-family: Arial-BoldMT;
        line-height: 40px;
        .label {
          font-size: 12px;
          color: #fff;
          font-weight: 500;
        }
        .value {
          font-size: 15px;
          color: #fff;
          flex: auto;
          text-align: center;
        }
      }
      .remark {
        margin-bottom: 15px;
        span {
          color: #fff;
        }
      }
    }
    .bar {
      width: 100%;
      height: 98px;
      padding: 16px 0;
      box-sizing: border-box;
      div {
        flex: 1;
        text-align: center;
        p:nth-child(1) {
          color: #fff;
          font-size: 12px;
          line-height: 35px;
        }
        p:nth-child(2) {
          color: #fff;
          font-size: 13px;
          line-height: 35px;
        }
      }
    }
  }
}
</style>
